<template>
  <s-page custom-class="Search-Page">
    <c-demo-block title="基础用法">
      <s-search v-model="keyword" @search="handleSearch" />
    </c-demo-block>

    <c-demo-block title="使用粘性组件">
      <s-sticky :scroll-top="scrollTop">
        <s-search
          v-model="keyword"
          background="linear-gradient(45deg, rgb(28, 187, 180), rgb(141, 198, 63))"
          shape="round"
          @search="handleSearch"
        />
      </s-sticky>
    </c-demo-block>

    <c-demo-block title="右侧按钮">
      <s-search v-model="keyword" show-action @search="handleSearch" @action="handleSearch" />
    </c-demo-block>

    <c-demo-block title="搜索框内容对齐">
      <s-search v-model="keyword" align="center" @search="handleSearch" />
    </c-demo-block>

    <c-demo-block title="自定义背景色">
      <s-search v-model="keyword" background="#4fc08d" shape="round" @search="handleSearch" />
    </c-demo-block>

    <c-demo-block title="禁用搜索框-用来做点击跳转">
      <s-search disabled shape="round" placeholder="搜索" @click="handleClick" />
    </c-demo-block>
  </s-page>
</template>

<script>
export default {
  data: () => ({
    scrollTop: 0,
    keyword: '',
  }),
  onPageScroll({ scrollTop }) {
    this.scrollTop = scrollTop;
  },
  methods: {
    handleSearch(value) {
      if (!value) {
        uni.showToast('请输入');
      } else {
        uni.showToast('输入值为：' + value);
      }
    },
    handleClick(e) {
      console.log(e);
    },
  },
};
</script>

<style lang="scss">
.Search-Page {
  min-height: 150vh;
  ::v-deep {
    .c-demo-block {
      &__title {
        padding-left: $padding-md;
      }
    }
  }
}
</style>
